import PageHeaderWrapper from "@/components/pageHeaderWrapper"
import './users.styl'
import { getUserList } from '@/api/user'
import { useEffect, useState } from "react"
import { Card, Input, Form, Table, Row, Col, Select, Button, Space } from 'antd'

const { Column } = Table
const { Option } = Select

function Users() {

  const [tableData, setTableData] = useState()
  const [loading, setLoading] = useState(false)
  const [form] = Form.useForm()

  async function getData(values) {
    setLoading(true)
    const data = await getUserList(values)
    if(data) {
      setTableData(data.data)
      setLoading(false)
    }
  }

  useEffect(() => {
    getData()
  }, [])

  const onFinish = values => {
    console.log('Received values of form: ', values)
    getData(values)
  }
  
  return (
    <>
      <PageHeaderWrapper title="用户管理" subTitle="(副标题)"></PageHeaderWrapper>
      <section className="G-main P-users">
        <Card>
          <Form form={ form } onFinish={ onFinish }>
            <Row gutter={24}>
              <Col span={8}>
                <Form.Item name="username" label="昵称" rules={ [{ required: true, message: '请输入昵称' }] }>
                  <Input placeholder="请输入" />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item name="sex" label="性别">
                  <Select>
                    <Option value='m'>男</Option>
                    <Option value='w'>女</Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item>
                  <Space>
                    <Button type="primary" htmlType="submit" block={ true } loading={ loading }>查询</Button>
                    <Button style={{ marginLeft: '12px' }} onClick={() => { form.resetFields() }}>重置</Button>
                  </Space>
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <Table dataSource={ tableData } loading={ loading }>
            <Column title="ID" dataIndex="id" key="id" />
            <Column title="用户名称" dataIndex="username" key="username" />
            <Column title="性别" dataIndex="age" key="age" render={ (_, record) => (<span>{ record.sex === 'm' ? '男' : record.sex === 'w' ? '女' : '' }</span>) }></Column>
            <Column title="手机号" dataIndex="mobile" key="mobile" />
          </Table>
        </Card>
      </section>
    </>
  )
}

export default Users
